<template>
	<view class="order-commit page">
		<mall-order-commit-label @click.native="showSendWay" class="label-sendWay" :more="sendWays[sendWay].name" title="配送方式" ></mall-order-commit-label>
		<view v-if="sendWay==0" class="address" @click="toAddress">
			<text class="iconfont icondizhi"></text>
		<view class="address-info" v-if="!address">
				<view class="detail">
					点击选择地址
				</view>
			</view>
			<view class="address-info" v-else>
				<view class="user-info">
					<text class="name">{{address.name}}</text>
					<text class="phone">{{address.mobile}}</text>
				</view>
				<view class="detail">
				{{address.province}} {{address.city}} {{address.county}}	{{address.detail}}
				</view>
			</view>
			<text class="iconfont iconarrow_right"></text>
		</view>
		<view class="order-info">
			<view class="top">
				<image class="img" :src="logo"></image>
				<text class="name">{{name}}</text>
			</view>
			<view class="items">
				<mall-order-item :item="item" v-for="(item,index) in cartItems" :key="index" class="item"></mall-order-item>
			</view>
		</view>
		<view class="labels">
			<!-- <mall-order-commit-label class="label first" :remark="true" more="选择优惠券" title="商品金额" right="¥188.00"></mall-order-commit-label> -->
			<view class="other">
			<mall-order-commit-label class="label" :more="priceInfo.total" title="商品金额" ></mall-order-commit-label>
			<!-- <mall-order-commit-label class="label" :more="priceInfo.cut" title="优惠金额" ></mall-order-commit-label> -->
			<mall-order-commit-label class="label" v-if="priceInfo.point>0" :more="priceInfo.point" title="可用积分" ></mall-order-commit-label>
			<mall-order-commit-label class="label" :more="mailFee" :title="mailText" ></mall-order-commit-label>
			<mall-order-commit-label class="label" :more="CEC" title="存储金余额" ></mall-order-commit-label>
			<mall-order-commit-label class="label" :more="POINT" title="积分余额" ></mall-order-commit-label>
			<mall-order-commit-label v-model="remark" :input="true" @click.native="showRemark" class="label" more="填写备注" title="备注" ></mall-order-commit-label>
			</view>
		</view>
		<mall-commit-bar @confirm="confirm"  :priceInfo="priceInfo" :logFee="mailFee" :point="POINT" class="commit-bar"></mall-commit-bar>
		<min-action-sheet ref="as"></min-action-sheet>
	</view>
</template>

<script>
	import mallOrderItem from '@/components/mall-order-item/mall-order-item.vue'
	import mallOrderCommitLabel from '@/components/mall-order-commit-label/mall-order-commit-label.vue'
	import mallCommitBar from '@/components/mall-commit-bar/mall-commit-bar.vue'
	import {getCart,setCart} from '@/storage/index.js'
	import {clear} from '@/common/js/cart.js'
	import CONFIG from '@/config/index.js'
	import {mallAddressInfo,getMallAddress} from '@/api/address.js'
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet.vue'
	import {commit} from '@/api/order.js'
	import {showCorrect} from '@/modal/index.js'
	import {showError} from '@/toast/index.js'
	import {account} from '@/api/user'
	export default {
		components:{
			mallOrderItem,mallOrderCommitLabel,mallCommitBar,minActionSheet
		},
		onShow() {
			account().then(res=>{
				this.POINT = res.extra.POINT
				this.CEC = res.extra.CEC
			})
			this.cart = getCart()
			if(this.addressId){
				mallAddressInfo(this.addressId).then(res => {
					this.address = res.data
				})
			}else{
				this.getAddress()
			}
			
		},
		methods:{
			showRemark(){
					
			},
			showSendWay(){
				this.$refs.as.handleShow({
					actions:this.sendWays,
					success: (res) => {
						this.sendWay = res.id
					}
				})	
			},
			getAddress(){
				getMallAddress().then(res => {
					res.data.forEach(ad => {
						if(ad.def){
							this.address = ad
						}
					})
				})
			},
			commit(){
				let addressId = null
				if(this.sendWay == 0){
					addressId = this.address.id
				}
				commit(this.cartItems,addressId,this.payWay,this.remark,this.sendWay).then(res => {
					if(res.data.paid){//已经支付
						this.clearCart()
						showCorrect("支付成功").then(res => {
							this.$Router.replace("/pages/mall/order/index")
						})
					}else if(res.data.wxPayParam){  //微信支付
						this.wxPay(res)
					}else { //现金支付
					    showCorrect("共需支付"+res.data.price+"元",false).then(res => {
					    	this.$Router.replace("/pages/mall/order/index")
					    })
					}
				})
			},
			wxPay(res){
				let ob = JSON.parse(res.data.wxPayParam)
				uni.requestPayment({
					success:()=>{
						this.clearCart()
						showCorrect("支付成功").then(res => {
							this.$Router.replace("/pages/mall/order/index")
						})
					},
					complete:()=>{
						this.clearCart()
					},
					fail: () => {
						showError("取消支付!")
						this.$Router.replace({
							path:"/pages/mall/order/detail",
							query:{id:res.data.orderId}
						})
					},
					...ob
				})
			},
			toAddress(){
			  this.$Router.push("/pages/address/address")	
			},
			clearCart(){
				this.cart = clear(this.cart)
				setCart(this.cart)
			},
			confirm(){
				if(!this.address&&this.sendWay==0){
					showError("请先选择地址")
					return
				}
				this.$refs.as.handleShow({
					actions:this.payWays,
					success: (res) => {
						this.payWay = res.id
						this.commit()
					}
				})
			}
		},
		computed:{
			logo(){
				return CONFIG.IMG_HEAD + getApp().globalData.config.logo
			},
			name(){
				return  getApp().globalData.config.name
			},
			mailText(){
				return '满'+getApp().globalData.config.mailFree+"元包邮"
			},
			mailFee(){
				let res = getApp().globalData.config.mailFee
				if(this.priceInfo.total >= getApp().globalData.config.mailFree){
					res = 0.00
				}
				return res
			},
			cartItems(){
				return	Object.values(this.cart).filter(item => item.sel)
			},
			priceInfo(){
				let nowPrice = 0
				let oldPrice = 0 
				let point = 0
				let number = 0
				this.cartItems.forEach(item => {
					if(item.sel){
						nowPrice += item.nowPrice*item.number
						oldPrice += item.oldPrice*item.number
						point += item.point*item.number
						number+=item.number 
					}
				})
				let cut = (oldPrice - nowPrice).toFixed(2)
				let total = nowPrice.toFixed(2)
				//实际支付 积分抵扣 100抵1
				// let pay = (total-point/100).toFixed(2)
				return {cut:"-"+cut,total,point,number}
			}
		},
		data() {
			return {
				cart:{},
				CEC:0,
				POINT:0,
				payWay:0,
				sendWay:0,
				payWays:[{name:"微信支付"},{"name":"余额支付"},{"name":"现金支付"}],
				sendWays:[{name:"邮寄"},{"name":"自提"}],
				addressId:null,
				address:null,
				remark:null
			};
		}
	}
</script>

<style lang="stylus" scoped>
	.order-commit
		padding 0 20upx 100upx
		background url(../../../static/dbg.png)  no-repeat
		background-size 100% 150upx
		min-height 100%
		overflow scroll
		background-color #EFEFEF
		.label-sendWay
			margin-bottom 10upx
			display block
		.address
			 margin-bottom 10upx
			 border-radius 10upx
			 background-color #FFFFFF
			 height 200upx
			 display flex
			 padding 0 22upx 
			 justify-content space-between
			 align-items center
			 .icondizhi
				font-size 40upx
				color #F0C808
			.address-info
				width 551upx
				display flex
				flex-direction column
				justify-content center
				.user-info
					margin-bottom 25upx
					display flex
					align-items center
					.name
						font-size 32upx
						color #4E3D07
						margin-right 25upx
						line-height 32upx
					.phone
						color #A1A1A1
						font-size 28upx
				.detail
					text-overflow ellipsis
					line-clamp 2
					overflow hidden
					font-size 24upx
					color #4E3D07
			.iconarrow_right
				font-size 22upx
				color #6F6F6F
		.order-info
			border-radius 10upx
			background-color white
			padding 20upx 20upx
			.top
				height 48upx
				display flex
				align-items center
				display flex
				align-items center
				margin-bottom 33upx
				.img
					height 48upx
					width 48upx
					margin-right 12upx
				.name
					color #4E3D07
					font-size 28upx
			.items
				display flex
				flex-direction column
				.item
					margin-bottom 19upx
		.labels
			margin-top 20upx
			display flex
			flex-direction column
			border-radius 10upx
			overflow hidden
			.label
				&.first
					border-bottom none
					border-radius 10upx
					overflow hidden
					margin 10upx 0
			.other
				border-radius 10upx
				overflow hidden
				display flex
				flex-direction column
				.label
					 border-bottom 1Px solid #DCDCDC
					 &:last-child
						border-bottom none
		.commit-bar
			z-index 2
			position fixed
			bottom 0
			left 0
			right 0
</style>
